<template>
  <view class="container" @click="receive" :class="item.checked ? 'selected' : ''">
    <view class="container_header">
      <view class="container_header_pic">
        <image src="/static/image/coupon_pic.png" mode="widthFix" />
      </view>
      <view class="container_header_title">
        <view class="container_header_title_name">{{ item.name }}</view>
        <view class="container_header_title_today" v-if="isToday && currentIndex === 0">今日到期</view>
        <view class="container_header_title_date" v-else>{{ item.startDate }}-{{ item.endDate }}</view>
      </view>
      <view class="container_header_price">
        <itemPrice :price="item.deductAmount" style="text-align: right"></itemPrice>
        <view>满{{ item.effectAmount }}可用</view>
      </view>
    </view>
    <view class="container_line"></view>
    <view class="container_footer">
      <view class="container_footer_err" v-if="fromSettle && !item.isSatisfy">{{ item.errorMessage }}</view>
      <button class="container_footer_receive" v-if="isReceive">我要领取</button>
      <button class="container_footer_use" :class="useStatus"  v-else>{{ useText }}</button>
    </view>
  </view>
</template>

<script>
import itemPrice from '@/components/itemPrice'
import DateUtils from '@/utils/DateUtils.js'
export default {
  name: 'goodsCard',
  components: { itemPrice },
  props: {
    item: {
      type: Object,
      default: {},
    },

    index: {
      type: Number,
      default: 0,
    },
    isReceive: {
      type: Boolean,
      default: false,
    },
    fromSettle: {
      type: Boolean,
      default: false, //是否从订单页进入
    },
    currentIndex: {
      //当前分段器位置
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isToday: '',
    }
  },
  created() {
    this.isToday = DateUtils.isToday(this.item.endDate)
  },
  onLoad() {},
  computed: {
    useStatus() {
      console.log('currentIndex', this.currentIndex)
      if (this.fromSettle && !this.item.isSatisfy) {
        return 'gray'
      } else {
        switch (this.currentIndex) {
          case 0:
            return ''
            break
          case 1:
            return 'gray'
            break
          case 2:
            return 'couponRed'
            break
        }
      }
    },
    useText() {
      console.log('currentIndex', this.currentIndex)
      if (this.fromSettle) {
        return '去使用'
      } else {
        switch (this.currentIndex) {
          case 0:
            return '未使用'
            break
          case 1:
            return '已使用'
            break
          case 2:
            return '已过期'
            break
        }
      }
    },
  },
  methods: {
    change() {
      this.$emit('change', this.index)
    },
    receive() {
      if (this.fromSettle && !this.item.isSatisfy) {
        this.uniShowToast(this.item.errorMessage)
        return
      }
      this.$emit('receive', this.index)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background: url('/static/image/coupon_item_bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 10rpx 20rpx;
  padding: 20rpx;
  &_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40rpx;
    &_pic {
      width: 100rpx;
    }
    &_title {
      flex: 1;
      margin: 0 20rpx;

      &_name {
        max-width: 300rpx;
        font-size: 36rpx;
        font-weight: bold;
        /*强制断行 */
        white-space: nowrap;
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis;
      }
      &_date {
        font-size: 18rpx;
        color: #666;
        margin-top: 10rpx;
      }
      &_today {
        width: 100rpx;
        font-size: 18rpx;
        margin-top: 10rpx;
        color: #ff3348;
        background-color: #f8e7e9;
        border: 1rpx solid #ff3348;
        padding: 6rpx 10rpx;
        border-radius: 10rpx;
      }
    }
    &_price {
      color: #666;
    }
  }
  &_line {
    margin: 30rpx 10rpx 0;
    border-top: 1rpx dashed #d9d9d9;
  }
  &_footer {
    padding-top: 10rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    &_err {
      font-size: 24rpx;
      color: #666;
    }
    &_use {
      width: 150rpx;
      background: linear-gradient(to right, #ffb300, #ff8f00);
      height: 56rpx;
      line-height: 56rpx;
      font-size: 28rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: auto;
      margin-right: 0;
    }
    &_receive {
      width: 180rpx;
      background: linear-gradient(to top, #ff3348, #ff6716);
      height: 56rpx;
      line-height: 56rpx;
      font-size: 28rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: auto;
      margin-right: 0;
    }
  }
}
.selected {
  border: 1px solid rgba(49, 194, 94, 1);
  background: linear-gradient(180deg, rgba(228, 250, 234, 1), rgba(245, 252, 247, 1) 100%);
}
.gray {
  background: #d9d9d9 !important;
}
.couponRed {
  background: #ff3348 !important;
}
</style>
